<!--<!DOCTYPE html>-->
<!--<html xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--    <title>WebSocket Chat</title>-->
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>-->
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>-->
<!--    <style>-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--        }-->

<!--        body {-->
<!--            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;-->
<!--            background-color: #f0f2f5;-->
<!--            height: 100vh;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--        }-->

<!--        .chat-container {-->
<!--            width: 80%;-->
<!--            max-width: 1000px;-->
<!--            height: 80vh;-->
<!--            background: white;-->
<!--            border-radius: 12px;-->
<!--            box-shadow: 0 2px 10px rgba(0,0,0,0.1);-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            overflow: hidden;-->
<!--        }-->

<!--        .chat-header {-->
<!--            padding: 20px;-->
<!--            background: #1a73e8;-->
<!--            color: white;-->
<!--            font-size: 1.2em;-->
<!--            font-weight: 500;-->
<!--        }-->

<!--        .message-area {-->
<!--            flex: 1;-->
<!--            padding: 20px;-->
<!--            overflow-y: auto;-->
<!--            background: #fff;-->
<!--        }-->

<!--        .message {-->
<!--            margin-bottom: 15px;-->
<!--            max-width: 70%;-->
<!--            clear: both;-->
<!--        }-->

<!--        .message .time {-->
<!--            font-size: 0.7em;-->
<!--            color: #999;-->
<!--            margin-bottom: 4px;-->
<!--        }-->

<!--        .message .content {-->
<!--            padding: 10px 15px;-->
<!--            border-radius: 15px;-->
<!--            position: relative;-->
<!--            word-wrap: break-word;-->
<!--        }-->

<!--        .message.sent {-->
<!--            float: right;-->
<!--        }-->

<!--        .message.sent .content {-->
<!--            background: #1a73e8;-->
<!--            color: white;-->
<!--            border-bottom-right-radius: 5px;-->
<!--        }-->

<!--        .message.received {-->
<!--            float: left;-->
<!--        }-->

<!--        .message.received .content {-->
<!--            background: #f1f3f4;-->
<!--            color: black;-->
<!--            border-bottom-left-radius: 5px;-->
<!--        }-->

<!--        .input-area {-->
<!--            padding: 20px;-->
<!--            background: white;-->
<!--            border-top: 1px solid #eee;-->
<!--            display: flex;-->
<!--            gap: 10px;-->
<!--        }-->

<!--        input {-->
<!--            padding: 12px;-->
<!--            border: 1px solid #ddd;-->
<!--            border-radius: 8px;-->
<!--            outline: none;-->
<!--            font-size: 14px;-->
<!--            transition: border-color 0.3s;-->
<!--        }-->

<!--        input:focus {-->
<!--            border-color: #1a73e8;-->
<!--        }-->

<!--        #message {-->
<!--            flex: 1;-->
<!--        }-->

<!--        #receiver {-->
<!--            width: 150px;-->
<!--        }-->

<!--        button {-->
<!--            padding: 12px 24px;-->
<!--            background: #1a73e8;-->
<!--            color: white;-->
<!--            border: none;-->
<!--            border-radius: 8px;-->
<!--            cursor: pointer;-->
<!--            font-weight: 500;-->
<!--            transition: background-color 0.3s;-->
<!--        }-->

<!--        button:hover {-->
<!--            background: #1557b0;-->
<!--        }-->

<!--        .system-message {-->
<!--            text-align: center;-->
<!--            margin: 10px 0;-->
<!--            color: #666;-->
<!--            font-size: 0.9em;-->
<!--        }-->

<!--        /* 清除浮动 */-->
<!--        .clearfix::after {-->
<!--            content: "";-->
<!--            display: table;-->
<!--            clear: both;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="chat-container">-->
<!--        <div class="chat-header">-->
<!--            WebSocket Chat - <span th:text="${username}"></span>-->
<!--        </div>-->
<!--        <div id="messageArea" class="message-area"></div>-->
<!--        <div class="input-area">-->
<!--            <input type="text" id="message" placeholder="输入消息..." onkeypress="handleKeyPress(event)"/>-->
<!--            <input type="text" id="receiver" placeholder="接收者用户名"/>-->
<!--            <button onclick="sendMessage()">发送</button>-->
<!--        </div>-->
<!--    </div>-->

<!--    <script th:inline="javascript">-->
<!--        var stompClient = null;-->
<!--        var username = [[${username}]];-->

<!--        function connect() {-->
<!--            var socket = new SockJS('/ws?username=' + encodeURIComponent(username));-->
<!--            stompClient = Stomp.over(socket);-->
<!--            -->
<!--            stompClient.connect({}, function(frame) {-->
<!--                console.log('Connected: ' + frame);-->
<!--                -->
<!--                stompClient.subscribe('/topic/public', function(message) {-->
<!--                    showMessage(JSON.parse(message.body));-->
<!--                });-->
<!--                -->
<!--                stompClient.subscribe('/user/' + username + '/topic/private', function(message) {-->
<!--                    showMessage(JSON.parse(message.body));-->
<!--                });-->
<!--            });-->
<!--        }-->

<!--        function handleKeyPress(event) {-->
<!--            if (event.keyCode === 13) { // Enter键-->
<!--                sendMessage();-->
<!--            }-->
<!--        }-->

<!--        function sendMessage() {-->
<!--            var messageContent = document.getElementById('message').value;-->
<!--            var receiver = document.getElementById('receiver').value;-->
<!--            -->
<!--            if (!messageContent.trim()) return;-->

<!--            if (receiver) {-->
<!--                stompClient.send("/app/private-message", {}, JSON.stringify({-->
<!--                    content: messageContent,-->
<!--                    sender: username,-->
<!--                    receiver: receiver,-->
<!--                    type: 'PRIVATE'-->
<!--                }));-->
<!--            } else {-->
<!--                stompClient.send("/app/broadcast", {}, JSON.stringify({-->
<!--                    content: messageContent,-->
<!--                    sender: username,-->
<!--                    type: 'CHAT'-->
<!--                }));-->
<!--            }-->
<!--            -->
<!--            document.getElementById('message').value = '';-->
<!--        }-->

<!--        function showMessage(message) {-->
<!--            var messageArea = document.getElementById('messageArea');-->
<!--            var messageDiv = document.createElement('div');-->
<!--            var timestamp = new Date().toLocaleTimeString();-->
<!--            -->
<!--            if (message.type === 'PRIVATE') {-->
<!--                if (message.sender === username) {-->
<!--                    messageDiv.className = 'message sent clearfix';-->
<!--                    messageDiv.innerHTML = `-->
<!--                        <div class="time">我对 ${message.receiver} 说 - ${timestamp}</div>-->
<!--                        <div class="content">${message.content}</div>-->
<!--                    `;-->
<!--                } else {-->
<!--                    messageDiv.className = 'message received clearfix';-->
<!--                    messageDiv.innerHTML = `-->
<!--                        <div class="time">${message.sender} 对我说 - ${timestamp}</div>-->
<!--                        <div class="content">${message.content}</div>-->
<!--                    `;-->
<!--                }-->
<!--            } else {-->
<!--                if (message.sender === username) {-->
<!--                    messageDiv.className = 'message sent clearfix';-->
<!--                    messageDiv.innerHTML = `-->
<!--                        <div class="time">我对所有人说 - ${timestamp}</div>-->
<!--                        <div class="content">${message.content}</div>-->
<!--                    `;-->
<!--                } else {-->
<!--                    messageDiv.className = 'message received clearfix';-->
<!--                    messageDiv.innerHTML = `-->
<!--                        <div class="time">${message.sender} 对所有人说 - ${timestamp}</div>-->
<!--                        <div class="content">${message.content}</div>-->
<!--                    `;-->
<!--                }-->
<!--            }-->
<!--            -->
<!--            messageArea.appendChild(messageDiv);-->
<!--            messageArea.scrollTop = messageArea.scrollHeight;-->
<!--        }-->

<!--        window.onload = connect;-->
<!--    </script>-->
<!--</body>-->
<!--</html>-->